<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <meta name="format-detection" content="telephone=no">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
  <meta http-equiv="Pragma" content="no-cache" />
  <meta http-equiv="Expires" content="0" />

  <title></title>
  <link href="../css/mui.min.css" rel="stylesheet">
  <link href="../css/mui.picker.min.css" rel="stylesheet">
  <link href="css/detail.css" rel="stylesheet">
</head>
<body class="mui-fullscreen"> 
	<div class="mui-scroll-wrapper data-box-wrapper">
		<div class="mui-scroll">	
			
			<ul class="mui-table-view">
		    <li class="mui-table-view-cell" id="select_color">
		      <a class="mui-navigate-right select-color">
		      	选择颜色
		      	<span id="select_color_name"></span>
		      </a>
		    </li>
			</ul>
	
			<!--图片轮播区域-->
			<div class="mui-slider">
			  <div class="mui-slider-group mui-slider-loop">
			    <!--支持循环，需要重复图片节点-->
			    <div class="mui-slider-item mui-slider-item-duplicate">
			    	<a href="#"><img src="pictures/4.jpg" /></a>
			    </div>
			    <div class="mui-slider-item"><a href="#"><img src="pictures/1.jpg" /></a></div>
			    <div class="mui-slider-item"><a href="#"><img src="pictures/2.jpg" /></a></div>
			    <div class="mui-slider-item"><a href="#"><img src="pictures/3.jpg" /></a></div>
			    <div class="mui-slider-item"><a href="#"><img src="pictures/4.jpg" /></a></div>
			    <!--支持循环，需要重复图片节点-->
			    <div class="mui-slider-item mui-slider-item-duplicate">
			    	<a href="#"><img src="pictures/1.jpg" /></a>
			    </div>
			  </div>
			</div>
			
			<div class="attributes">
				<table class="table table-bordered">
		      <tr class="thead">
		        <td colspan="2">产品信息</td>
		      </tr>
		      <tr>
		      	<td class="lbl">11</td>
		      	<td>2222222222222222222</td>
		      </tr>
		      </tr>
		      <tr>
		      	<td class="lbl">11</td>
		      	<td>22</td>
		      </tr>
		      </tr>
		      <tr>
		      	<td class="lbl">11</td>
		      	<td>22</td>
		      </tr>
		      </tr>
		      <tr>
		      	<td class="lbl">11</td>
		      	<td>22</td>
		      </tr>
		      </tr>
		      <tr>
		      	<td class="lbl">11</td>
		      	<td>22</td>
		      </tr>
		      </tr>
		      <tr>
		      	<td class="lbl">11</td>
		      	<td>22</td>
		      </tr>
		    </table>
			</div>
	
	
			<iframe height=200 width=320 src='http://player.youku.com/embed/XMTc4Mjc1MTU2MA==' frameborder=0 'allowfullscreen'></iframe>
			
			<div id="segmentedControl" class="mui-segmented-control samelavel-box">
				<a class="mui-control-item mui-active" href="#same_type_box">
					同类别
				</a>
				<a class="mui-control-item" href="#same_brand_box">
					同品牌
				</a>
			</div>
			
			<div id="same_type_box" class="mui-control-content mui-active">
				<ul class="mui-table-view mui-grid-view">
	        <li class="mui-table-view-cell mui-media mui-col-xs-6">
	            <a href="#">
	                <img class="mui-media-object" src="pictures/1.jpg">
	                <div class="mui-media-body">1235</div></a></li>
	        <li class="mui-table-view-cell mui-media mui-col-xs-6">
	            <a href="#">
	                <img class="mui-media-object" src="pictures/2.jpg">
	                <div class="mui-media-body">5678</div></a></li>
	        <li class="mui-table-view-cell mui-media mui-col-xs-6">
	            <a href="#"><img class="mui-media-object" src="pictures/3.jpg">
	                <div class="mui-media-body">9101112</div></a></li>
	        <li class="mui-table-view-cell mui-media mui-col-xs-6">
	            <a href="#">
	                <img class="mui-media-object" src="pictures/4.jpg">
	                <div class="mui-media-body">1324</div></a></li>
			  </ul>
			</div>
			
			<div id="same_brand_box"  class="mui-control-content">
				<ul class="mui-table-view mui-grid-view">
	        <li class="mui-table-view-cell mui-media mui-col-xs-6">
	            <a href="#">
	                <img class="mui-media-object" src="pictures/1.jpg">
	                <div class="mui-media-body">幸福就是可以一起睡觉</div></a></li>
	        <li class="mui-table-view-cell mui-media mui-col-xs-6">
	            <a href="#">
	                <img class="mui-media-object" src="pictures/2.jpg">
	                <div class="mui-media-body">想要一间这样的木屋，静静的喝咖啡</div></a></li>
	        <li class="mui-table-view-cell mui-media mui-col-xs-6">
	            <a href="#"><img class="mui-media-object" src="pictures/3.jpg">
	                <div class="mui-media-body">Color of SIP CBD</div></a></li>
	        <li class="mui-table-view-cell mui-media mui-col-xs-6">
	            <a href="#">
	                <img class="mui-media-object" src="pictures/4.jpg">
	                <div class="mui-media-body">静静看这世界</div></a></li>
			  </ul>
			</div>
			
	
		</div>
	</div>
    	
	<script type="text/javascript" src="../libs/jquery-1.10.2.min.js"></script>
	<script type="text/javascript" src="../libs/mui.min.js"></script>
	<script type="text/javascript" src="../libs/mui.picker.min.js"></script>
  <script type="text/javascript" src="../libs/config.js?v=201608172106"></script>
  <script src="js/detail.js"></script>
</body>
</html>